<template>
<!-- 袖长 -->
    <div id="outside_sleeve">
        <van-nav-bar title="开始测量" left-text="返回" left-arrow
            @click-left="onClickLeft"
             @click-right="onClickRight"
        >
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
        </van-nav-bar>
        <!-- 测量尺寸-袖长_03.png -->
        <div class="bust_img">
            <img src="../assets/images/我的尺寸/pic_2.png" alt="">
        </div>
        <div class="bust_described">
            <p>测量方法</p>
            <p>将卷尺放在髋骨上部和胸腔下部中间的地方，贴紧皮肤<br>
                但不要勒紧。在呼气状态下读取测量值，精确到0.1 cm</p>
        </div> 
        <div class="footer">
            <img src="../assets/images/我的尺寸/biaochi.png" alt="">
            <p class="footer_title" is-link @click="showPopup">添加胸围</p>
            <p class="footer_num"><input  class="myttpp" type="text"  v-model="sizes"></p>
            <router-link to='/Waistline'>
                <p class="next">下一步&nbsp;
                <img src="../assets/images/我的尺寸/icon.png" alt=""></p>
            </router-link>
        </div>
          <div>
            <!-- 遮罩层 -->
             <van-popup v-model="show">
                <div class="title_local">
                    <p ><span>添加胸围</span></p>
                    <p class="nextPag"
                        @click="onEnter"
                    >确认</p>
                </div>
                <ul class="size">
                    <li 
                        v-for="(item,index) in items"
                        :key="index"
                        @click="onSure(item.size)"
                    >{{item.size}}</li>
                </ul>
            </van-popup>     
        </div>
    </div>
</template>

<script>
export default {
    name:"OutsideSleeve",
    data(){
        return{
               show: false,
               items:[
                   {index:'0',size:'30cm' },
                   {index:'1',size:'31cm' },
                   {index:'2',size:'32cm' },
                   {index:'3',size:'33cm' },
                   {index:'4',size:'34cm' },
                   {index:'5',size:'35cm' },
                   {index:'6',size:'36cm' },
                   {index:'7',size:'37cm' },
                   {index:'8',size:'38cm' },
                   {index:'9',size:'39cm' },
               ],
               sizes:'0.0cm',
        }
    },
     methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
 
     showPopup() {
      this.show = true;
    },
    onSure(size){
        this.sizes=size
     },
    onEnter(){
        // console.log(1)
        this.show = false;
    }
    
  },
}
</script>

<style scoped lang="less">
    #outside_sleeve{
        background:#f9f9f9;
    }
     .bust_img{
        width:58%;
        margin:0 auto;
            padding-top:180px;
            box-sizing: border-box;
        }
    .bust_img img{
        height: 400px;
        
    }
    .bust_described{
        width:92%;
        height:140px;
        margin:94px auto;
        p{
            font-size:28px;
            color:#999;
            text-align: center;
            line-height:40px;
            margin-top:8px;
        }
    }
    .footer {
        margin-top:66px;
        width:100%;
        height: 422px;
        position: relative;

        img{
            width:100%;
            height: 100%;
        }
        // box-sizing:border-box;
    }
    .footer_title{
        font-size:28px;
        color:#333;
        text-align: center;
        position: absolute;
        left:43%;
        top:34px;
        span{
            font-size:20px;
             color:#999;
        }
    }
    .footer_num{
        position: absolute;
        left:41%;
        top:150px;
        span{
           font-size:14px; 
           font-weight:600;
        }
        .myttpp{
            border:none;
            outline:none;
            width:160px;
            background:#ccc;
            font-size:48px;
           font-weight:600;
           height:74px;
            text-align: center;

        }
    }
    .next{
        font-size:23px;
        color:#234497;
        text-align: center;
        padding-top:34px;
        position: absolute;
        left:76%;
        top:144px;
        img{
            width:30px;
        }
    }
     // 遮罩层
    .van-popup{
        width:88%;
        height:728px;
        border-radius:10px;
    }

    .title_local{
        width:100%;
        height:120px;
        background:#f8f8f8;
        line-height:120px;
        position: fixed;
        z-index: 9999999;
        p{
            color:#999;
            margin-left:56px;
             font-size:20px;
             float:left;
            
            span{
                font-size:28px!important;
                color:#333!important;
            }
        }
       .nextPag{
            margin-right:46px;
             float:right;
            color:#234497;
       }
    }
    .size{
        width:540px;
        height:510px;
        margin:0 auto;
        margin-top:100px;
        z-index: -10;
        overflow: auto;

    }
    .size li{
        border-bottom:1px solid rgb(238, 236, 236);
        text-align:center;
        font-size:30px;
        color:#666;
        line-height:90px;

    }
    //OutsideSleeve
</style>
